<template>
    <div>
      <div class="box">
        <el-button type="primary" @click="handleAddPayCode">添加支付码</el-button>
      </div>
      <div class="box">
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              prop="codeId"
              label="ID"
              width="80">
            </el-table-column>
            <el-table-column
              prop="payCode"
              label="支付码"
              width="120">
            </el-table-column>
            <el-table-column
              prop="codeUsed"
              label="是否使用"
              :formatter="formatterStatus"
              width="100">
            </el-table-column>
            <el-table-column
              prop="codeDesc"
              width="180"
              label="支付码描述">
            </el-table-column>
            <el-table-column
              prop="createTime"
              width="220"
              label="生成时间">
            </el-table-column>
  
  <!--          <el-table-column label="操作" width="280">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      type="danger"
                      @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                  </template>
            </el-table-column> -->
          </el-table>
      </div>
  
      <div style="margin: 10px;">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="pageNum"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange"
          >
        </el-pagination>
      </div>
    </div>
  </template>
  
  <script>
    import {getPayCodeList,addOnePayCode} from '@/api/news.js'
    export default {
      name: 'PayCodePage',
      data() {
        return {
          tableData: [],
          total: 0,
          pageSize: 10,
          pageNum: 1,
        }
      },
      mounted() {
        this.loadList();
      },
      methods: {
        loadList() {
          let param = {
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
          getPayCodeList(param).then(res => {
            console.log('getPayCodeList', res);
            if(res.code == 200) {
              this.tableData = res.data.records
              this.pageNum = res.data.current
              this.pageSize = res.data.size
              this.total = res.data.total
            }
          })
        },
        handleDelete(index, row) {
          console.log('handleDelete', row)
        },
        handleCurrentChange(val) {
          console.log(`当前页: ${val}`)
          this.pageNum = val
          this.loadList()
        },
        handleSizeChange(val) {
          console.log(`每页 ${val} 条`)
          this.pageSize = val
          this.loadList()
        },
        handleAddPayCode() {
          let param = {};
          param.codeDesc = '后台增加';
          addOnePayCode(param).then(res => {
            if(res.code == 200) {
              this.$message.success('支付码添加成功');
              this.loadList()
            }
            else {
              let msg = res.message;
              this.$message.error(msg);
            }
          })
        },
        formatterStatus(row, column) {
          // console.log('formatterStatus', column);
          
          let stat = '没有使用';
          if(row.codeUsed == 1) {
            stat = '已使用';
          }
          else if(row.codeUsed == 2) {
            stat = '已经禁用';
          }

          return stat;
        }
      }
    }
  </script>
  
  <style>
  .box {
    margin: 10px;
  }
  </style>
  